<template>
  <div v-loading="showLoading">
    <div>
      <div style="margin-bottom: 20px">
        <el-radio-group @input="changeMessage" size="small" v-model="type">
          <el-radio-button :label="1">开票数据</el-radio-button>
          <el-radio-button :label="2">申报数据</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="type === 1">
        <div class="fx">
          <div class="block f5bg">
            <div class="block-left">近45日是否有开票记录：</div>
            <div
              class="block-right"
              v-html-no="{
                action: `${enterpriseApplyInfo.billingRecords ? '是' : '否'}`
              }"
            ></div>
          </div>
          <div class="block f5bg">
            <div class="block-left">近30天开票金额(元)：</div>
            <div
              class="block-right"
              v-html-no="{ action: enterpriseApplyInfo.billingDaysSum }"
            ></div>
          </div>
        </div>

        <div class="fx">
          <div class="block">
            <div class="block-left">近12月作废发票数量占比：</div>
            <div
              class="block-right"
              v-html-no="{
                action: enterpriseApplyInfo.taxVoidRateMonth12,
                unit: '%'
              }"
            ></div>
          </div>
          <div class="block">
            <div class="block-left">近12个月断票月数：</div>
            <div
              class="block-right"
              v-html-no="{ action: enterpriseApplyInfo.breakMonthsSum12 }"
            ></div>
          </div>
        </div>
        <div class="fx">
          <div class="block f5bg">
            <div class="block-left">近12月最长连续断票月数：</div>
            <div
              class="block-right"
              v-html-no="{
                action: `${enterpriseApplyInfo.breakMonthsSum}`
              }"
            ></div>
          </div>
          <div class="block f5bg">
            <div class="block-left">近12个月最大连续未开票间隔天数(销项)：</div>
            <div
              class="block-right"
              v-html-no="{
                action: `${invoiceInformation.taxAmountGrowthRateMonth12}`,
                unit: '%'
              }"
            ></div>
          </div>
        </div>
        <div class="fx">
          <div class="block ">
            <div class="block-left">近12个月月均开票金额同比增长率：</div>
            <div
              class="block-right"
              v-html-no="{
                action: `${invoiceInformation.taxAmountGrowthRateMonth12}`,
                unit: '%'
              }"
            ></div>
          </div>
        </div>

        <div style="margin-top: 30px">
          <div style="font-weight: bold; color: #222222">开票对比分析</div>
          <el-table
            style="margin-top: 10px"
            :data="enterpriseMonthApplyList"
            border
          >
            <el-table-column
              align="center"
              prop="name"
              label="开票对比分析"
            ></el-table-column>
            <el-table-column
              align="center"
              v-for="month in monthList"
              :key="month"
              :label="monthLabel(month)"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.name == '开票环比增长率' ||
                      scope.row.name == '开票同比增长率'
                  "
                  v-html-no="{ action: scope.row[month], unit: '%' }"
                ></div>
                <div v-else v-html-no="{ action: scope.row[month] }"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="margin-top: 30px">
          <div style="font-weight: bold; color: #222222">近三年开票总金额</div>
          <div>
            <month-table
              style="margin-top: 20px"
              :tableList="invoiceInfoDataList"
            ></month-table>
          </div>
        </div>
      </div>

      <div v-else>
        <div class="fx">
          <div class="block f5bg">
            <div class="block-left">近45日是否有申报记录：</div>
            <div
              class="block-right"
              v-html-no="{
                action: `${invoiceInformation.applyRecords ? '是' : '否'}`
              }"
            ></div>
          </div>
          <div class="block f5bg">
            <div class="block-left">近30天申报金额(元)：</div>
            <div
              class="block-right"
              v-html-no="{ action: invoiceInformation.applyAmountMonths1 }"
            ></div>
          </div>
        </div>
        <div class="fx">
          <div class="block">
            <div class="block-left">近12个月申报次数：</div>
            <div
              class="block-right"
              v-html-no="{
                action: `${invoiceInformation.applySum12}`
              }"
            ></div>
          </div>
        </div>

        <div>
          <div style="font-weight: bold; color: #222222">申报数据对比分析</div>
          <el-table
            style="margin-top: 10px"
            :data="enterpriseMonthApplyList"
            border
          >
            <el-table-column
              align="center"
              prop="name"
              label="申报对比分析"
            ></el-table-column>
            <el-table-column
              align="center"
              v-for="month in monthList"
              :key="month"
              :prop="month"
              :label="monthLabel(month)"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.name == '申报环比增长率' ||
                      scope.row.name == '申报同比增长率'
                  "
                  v-html-no="{ action: scope.row[month], unit: '%' }"
                ></div>
                <div v-else v-html-no="{ action: scope.row[month] }"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 20px">
          <div style="font-weight: bold; color: #222222">近三年申报总金额</div>
          <div>
            <month-table
              style="margin-top: 20px"
              :tableList="applyInfoDataList"
            ></month-table>
          </div>
        </div>
        <div style="margin-top: 30px">
          <div style="font-weight: bold; color: #222222">近三年无票收入</div>
          <div>
            <month-table
              style="margin-top: 20px"
              :tableList="applySalesDataList"
            ></month-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getReportInvoice, getReportInvoiceList } from "@/api/report";
import { monthUtil } from "@/utils/date";
import monthTable from "../../../components/monthTable/index.vue";
export default {
  components: {
    monthTable
  },
  name: "invoiceInformation",
  data() {
    return {
      showLoading: false,
      //申报
      invoiceInformation: {},
      type: 1,
      paidTaxesDataList: [],
      //近三年申报总金额列表
      applyInfoDataList: [],

      applySalesDataList: [],
      //开票
      enterpriseApplyInfo: {},
      //开票对比分析
      enterpriseMonthApplyList: [],
      monthList: [],
      invoiceInfoDataList: []
    };
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  created() {
    // this.getEnterprisePaidTaxesAmountInfo();
    this.getEnterpriseApplyInfo();
  },
  methods: {
    monthLabel(month) {
      switch (month) {
        case "month3":
          return "近3个月";
        case "month6":
          return "近6个月";
        case "month12":
          return "近12个月";
        case "month24":
          return "近24个月";
        default:
          return month;
      }
    },
    changeMessage(e) {
      if (e == 1) {
        this.getEnterpriseApplyInfo();
      } else {
        this.getEnterprisePaidTaxesAmountInfo();
      }
    },
    funData(arr, type) {
      console.log(arr);
      let objMap = {};
      type == 1
        ? (objMap = {
            invoiceAmount: "开票金额",
            invoiceGrowthRate: "开票环比增长率",
            invoiceOverGrowthRate: "开票同比增长率",
            invoiceCount: "开票张数",
            invoiceMonthsNum: "开票月数",
            invoiceRedCountRate: "红冲发票张数占比",
            invoiceRedAmountRate: "红冲金额占比",
            customerUpNum: "上游客户数量",
            customerDownNum: "下游客户数量"
          })
        : (objMap = {
            applyAmount: "申报金额",
            applyGrowthRate: "申报环比增长率",
            applyOverGrowthRate: "申报同比增长率"
          });

      const data = arr.map(item => {
        return {
          month: item.month,
          ...item.taxEnterpriseApplyDate
        };
      });
      const result = Object.keys(objMap).map(key => ({
        name: objMap[key],
        ...data.reduce((acc, item) => {
          acc[`month${item.month}`] = null;
          return acc;
        }, {})
      }));
      data.forEach(item => {
        Object.entries(item).forEach(([key, value]) => {
          if (objMap[key]) {
            const resItem = result.find(r => r.name === objMap[key]);
            if (resItem) {
              resItem[`month${item.month}`] = value;
            }
          }
        });
      });
      let arrr = JSON.parse(JSON.stringify(result));
      const obj = delete arrr[0].name;
      this.monthList = Object.keys(arrr[0]);
      return result;
    },
    getEnterpriseApplyInfo() {
      let params = {
        enterpriseId: this.detailInfo.enterpriseId,
        createTime: this.detailInfo.createTime
      };
      this.showLoading = true;
      getReportInvoiceList(params)
        .then(res => {
          this.showLoading = false;
          this.enterpriseApplyInfo = res.data;
          this.enterpriseMonthApplyList = this.funData(
            res.data.enterpriseMonthApplyList,
            1
          );
          this.invoiceInfoDataList = res.data.invoiceInfoDataList.map(v => {
            return {
              year: v.year,
              ...monthUtil(v.monthData),
              add: v.total
            };
          });
        })
        .finally(() => {
          this.showLoading = false;
        });
    },
    getEnterprisePaidTaxesAmountInfo() {
      let params = {
        enterpriseId: this.detailInfo.enterpriseId,
        createTime: this.detailInfo.createTime
      };
      this.showLoading = true;
      getReportInvoice(params)
        .then(res => {
          this.invoiceInformation = res.data;

          this.applyInfoDataList = this.invoiceInformation.applyInfoDataList.map(
            v => {
              return {
                year: v.year,
                ...monthUtil(v.monthData),
                add: v.total
              };
            }
          );
          this.applySalesDataList = this.invoiceInformation.applySalesDataList.map(
            v => {
              return {
                year: v.year,
                ...monthUtil(v.monthData),
                add: v.total
              };
            }
          );
          this.enterpriseMonthApplyList = this.funData(
            res.data.enterpriseMonthApplyList,
            2
          );
          this.showLoading = false;
        })
        .finally(() => {
          this.showLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.f5bg {
  background: #f5f5f5;
}
.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .block {
    width: 48%;
    display: flex;
    align-items: center;
    max-height: 60px;
    padding: 18px 0;

    //line-height: 56px;
    .block-left {
      display: inline-block;
      //display: flex;
      text-align: right;
      width: 60%;
      // white-space: nowrap;
      color: #999;
    }
    .block-right {
      display: inline-block;
      //display: flex;
      line-height: 18px;
      color: #222;
      width: 38%;
    }
  }
}
.title-msg {
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
</style>
